<template>
        <div class="iframePhone" >
        <!--转接弹出框-->
            <div class="btnSty " id="changeBomb" style="display:none">
                <div class="inpNum">
                 <!-- 技能组 -->
                       <div class="inpNum_group">
                           <span  class="inpNum_group_tit">技能组</span>
                           <div class="inpNum_group_list">
                                <div  class="inpNum_group_nav"  v-for="(item,index) in studentsListData"  >
                                      <p :class="{unactive:isRestReasonActive !=index,active:isRestReasonActive ==index}"  @click = "inpNumGroupChid(index,item.skillId) ;inpNumcolor($event)"   style="cursor:pointer" >{{item.skillName}}</p>
                                      <p class="inpNum_group_nav_btn"   @click = "inpNumGroupBtn(item.skillCode)" style="cursor:pointer">转接</p>
                                </div>
                           </div>
                       </div>
                 <!-- 坐席 -->
                     <div class="inpNum_group">
                         <span   class="inpNum_group_tit">坐席
                           <i @click = 'changeBombOffBtn()' style="list-style: none" class="N_inpNumGroupTitIcon"  >
                          <Icon type="close-circled" class="N_inpNumGroupTitIcon"  ></Icon></i>
                         </span>
                          <div  class="inpNum_group_search">
                              <input type="text" v-model="inptext"><button  @click = "inpNumSearch()" >搜索</button>
                          </div>
                           <div class="inpNum_group_list_zuoxi"   >
                             <div  class="inpNum_group_nav" v-for="item in skillGroupata">
                               <p  style="cursor:pointer" >{{item.userName}}</p>
                               <p class="inpNum_group_nav_btn"   @click = "inpNumGroupBtn(item.extNumber)" style="cursor:pointer">{{item.status}}</p>
                             </div>
                         </div>
                     </div>

                </div>
            </div>
            <!--协商转接弹出框-->
          <Negotiation  ></Negotiation>
          <!--小修原因-->
          <zhixian></zhixian>
          <!--会议弹出框-->
          <div class="CbtnSty " id="meetBomb" style="display:none">
            <span>会议</span>
            <div class="inpNum">
              <p>请输入号码：</p><input type="text" id="meetBombNum">

            </div>
            <div class="popBtn">
              <button class="confiBtn" @click="meetBombConfiBtn()">确定</button>
              <button class="offBtn" @click="meetBombOffBtn()">取消</button>
            </div>
          </div>
        </div>

</template>

<script>
    import softphoneiframe from 'service/softPhoneIframe.js';
    import Negotiation from './Negotiation';
    import zhixian from './zhixian';
    export default {
        components: {
            Negotiation,
            zhixian
        },
        data() {
            return {
                studentsListData: [], //技能组列表
                skillGroupata: [], //技能组成员列表
                inptext: '', //获取搜索框文字
                groupSty: 'xxx',
                searchGroup: '', //暂存技能组成员
                allWithStatetData: '', //获取所有成员
                RestReasonActive: 0, //点击变色
                isRestReasonActive: 0
            };
        },
        methods: {

            //获取技能组
            async getUserSkillGroup() {
                let jsondata = await softphoneiframe.getUserSkillGroup({

                })
                if (!jsondata) {
                    jsondata = []
                }
                this.studentsListData = jsondata
            },
            //      拨通技能组
            inpNumGroupBtn(num) {
                var changeBombBtn = Iframe.contentWindow.document.getElementById("ifly-softphone")
                    //            var changeBombNum = $('#changeBombNum').val()
                var changeBombNum = num
                myframe.window.fn.singleTransfer(changeBombBtn, changeBombNum);
                document.getElementById("changeBomb").style.display = "none";
                //            document.getElementById("changeBombNum").value = '';
                this.$Message.info('正在转接，请稍后');

            },
            //         获取儿子技能组
            async inpNumGroupChid(c, id) {
                let jsondata = await softphoneiframe.getUserSkillGroupMember({
                    'skillId': id,
                })

                if (!jsondata) {
                    jsondata = []
                }


                for (let i = 0; i < jsondata.length; i++) {
                    //           mediaAgentId：用户多媒体坐席ID
                    //           valid：是否为有效用户
                    //           agentId：用户坐席ID
                    //           agentType：用户坐席类型
                    if (jsondata[i].status == 'Ready') {
                        jsondata[i].status = '就绪'
                    } else if (jsondata[i].status == 'NotReady') {
                        jsondata[i].status = '未就绪可转接'
                    } //：坐席状态，READY：坐席就绪，NOT_READY_BUT_TRANSFER_OK：未就绪可转接
                    //           userName：用户名
                    //           userId：用户ID
                    //           voiceAgentId：用户语音坐席工号
                }
                this.isRestReasonActive = c;
                this.skillGroupata = jsondata
            },
            //设置字体
            inpNumcolor(e) {
                e.target.classname = 'groupSty'

            },
            async allWithState() {
                let jsondata = await softphoneiframe.allWithState({

                })
                if (!jsondata) {
                    jsondata = []
                }
                this.allWithStatetData = jsondata
            },
            //搜索技能组成员
            inpNumSearch() {
                //         this.inpNumGroupChid( this.inptext)
                let inptext = this.inptext
                let memArr = this.allWithStatetData;
                let tempArr = [];
                let shuzu = [];
                for (let i = 0; i < memArr.length; i++) {
                    for (let j = 0; j < memArr[i].userList.length; j++) {
                        tempArr.push(memArr[i].userList[j]);
                    }
                }
                for (let i = 0; i < tempArr.length; i++) {
                    //           console.log(memArr.length);
                    //           inptext.length;
                    //           console.log(tempArr[i].userId);
                    //           console.log((tempArr[i].userId).split("", inptext.length).join(''));
                    if ((tempArr[i].userId).split("", inptext.length).join('') == inptext) {
                        if (tempArr[i].status == 'Ready') {
                            tempArr[i].status = '就绪'
                        } else if (tempArr[i].status == 'NotReady') {
                            tempArr[i].status = '未就绪可转接'
                        }
                        shuzu.push(tempArr[i])
                    };
                }
                console.log(shuzu);
                this.skillGroupata = shuzu;
            },
            changeBombOffBtn() {
                document.getElementById("changeBomb").style.display = "none";
                //            document.getElementById("changeBombNum").value = '';
                myframe.window.fn.reSetBtn();

            },
            //转会议
            meetBombConfiBtn() {
                var changeBombBtn = Iframe.contentWindow.document.getElementById("ifly-softphone")
                var meetBombNum = $('#meetBombNum').val()
                myframe.window.fn.singleConferenceCall(changeBombBtn, meetBombNum);
                document.getElementById("meetBomb").style.display = "none";
                document.getElementById("meetBombNum").value = '';
            },
            meetBombOffBtn() {
                document.getElementById("meetBomb").style.display = "none";
                document.getElementById("meetBombNum").value = '';
                myframe.window.fn.reSetBtn();
            },
            //       //获取手机号
            //       makeCallNum(){
            //         var Tani = document.myframe.Tani;
            //         var  uuid =   document.myframe.uuidP;
            //         console.log(Tani)
            //         console.log(uuid)
            //       },

            //        popContBtn() {
            //            this.$store.state.callUUid = document.myframe.uuidP;
            //            var _this = this;
            //            var Tani = document.myframe.Tani;
            //            //var Tani = '18888888888';
            //            //this.$store.state.returnCallNum[0]=Tani;
            //            this.$ajax({
            //                method: 'POST',
            //                baseURL:_this.$ajax.defaults.baseURLcc,
            //                url: 'mbcust/queryByMobileNo',
            //                data: {
            //                    "version": "1.0",
            //                    "method": "mbcust.queryByMobileNo",
            //                    "group": "csr",
            //                    "auth": "",
            //                    "params": {
            //                        "mobileno": Tani
            //                    }
            //                }
            //            })
            //                .then(function(response) {
            //                    //_this.$store.state.returnCallNum[0] = Tani;
            //                    //_this.$store.state.returnCallNum[1] = response;
            //                    if (response.data.code == "20000") {
            //                        _this.$store.state.returnCallNum = [Tani,response,true];
            //                        _this.$store.state.work_black_new_history=2;
            //                        _this.$router.push({ name: "历史弹屏" ,params:{returnCallNum:[Tani,response,true]}})
            //                        _this.$store.state.returnCallNumFlag ++;
            //                    } else {
            //                        _this.$store.state.work_black_new_history=2;
            //                        _this.$store.state.returnCallNum = [Tani,response,false];
            //                        _this.$router.push({ name: "历史弹屏" ,params:{returnCallNum:[Tani,response,false]}})
            //                        _this.$store.state.returnCallNumFlag ++;
            //                    }
            //                })
            //        },

        },
        mounted() {

            //             var userEntity = {voiceAgentId:80001,extNum: 190002};
            //            localStorage.setItem('UserMsg', JSON.stringify(userEntity));
            //            var tt=JSON.parse(localStorage.getItem('UserMsg'));
            let _this = this;

            window.addEventListener("message", function(e) {
                if (typeof e.data == "object") {
                    if (e.data.Trans == true) {
                        _this.allWithState();
                        _this.getUserSkillGroup();
                    }
                } else {

                    var Tani = document.myframe.Tani;
                    var uuidP = document.myframe.uuidP;
                    var MygetConnID = document.myframe.MygetConnID;
                    var MYgetuserData = document.myframe.MYgetuserData;
                    if (MYgetuserData == '') {
                        console.log(MYgetuserData);
                        _this.$store.commit('clearCallUserInfo')
                    } else {
                        MYgetuserData = JSON.parse(MYgetuserData);
                        if (MYgetuserData.isDial == '0') {
                            _this.$store.dispatch('setCallUserInfo', MYgetuserData)
                            _this.$store.dispatch('setCacheExcludeComponentName', ['callConfirm'])
                            _this.$store.commit('removeIncludePathTag', 'voicecall');
                            _this.$router.push({
                                path: "/callConfirm"
                            });
                            eventBus.$emit('refreshCallConfirm')
                        } else if (MYgetuserData.isDial == '1') {
                            // console.log(MYgetuserData)
                            _this.$store.dispatch('setCallUserInfo', MYgetuserData)
                        }
                    }
                    // if (MYgetuserData == '') {
                    //   alert('1')
                    //   _this.$store.dispatch('setCallUserInfo', '')
                    //         return;
                    //     } else {
                    //
                    //     }
                }
            }, false);

        }
    }
</script>
<style scoped>
    .CbtnSty {
        width: 260px;
        height: 145px;
        /*padding: 0px 20px;*/
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 80px auto;
        z-index: 999;
        background-color: #ffffff;
        border-bottom: 1px solid #e7e8eb;
        box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.5);
    }
    
    .CbtnSty span {
        display: block;
        width: 100%;
        height: 31px;
        line-height: 31px;
        font-size: 14px;
        padding-left: 10px;
        color: #fff3f3;
        background-color: #f05d49;
    }
    
    .CbtnSty .inpNum {
        margin-top: 22px;
    }
    
    .CbtnSty .inpNum p {
        display: inline;
        font-size: 12px;
        color: #2b2b2b;
        margin-left: 10px;
    }
    
    .CbtnSty .popBtn {
        width: 100%;
        height: 23px;
        display: block;
        margin-top: 40px;
        text-align: right;
        padding-right: 10px;
    }
    
    .CbtnSty .popBtn .confiBtn {
        background-color: #f05d49;
        border: none;
        color: #fff;
        width: 51px;
        height: 18px;
    }
    
    .CbtnSty .popBtn .offBtn {
        background-color: #e5e5e5;
        border: none;
        width: 51px;
        height: 18px;
    }
    
    .groupSty {
        color: red;
    }
    
     ::-webkit-scrollbar {
        display: none;
    }
    
    .btnSty {
        width: 640px;
        height: 450px;
        /*padding: 0px 20px;*/
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 80px auto;
        z-index: 999;
        background-color: #ffffff;
        border-bottom: 1px solid #e7e8eb;
        box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.5);
    }
    
    .btnSty span {
        display: block;
        width: 100%;
        height: 31px;
        line-height: 31px;
        font-size: 14px;
        padding-left: 10px;
        color: #fff3f3;
        /*background-color: #f05d49;*/
        margin-right: 10px;
    }
    
    .btnSty .inpNum .inpNum_group {
        float: left;
        width: 50%;
        min-height: 100%;
        border-left: 1px solid #0f0f0f;
    }
    
    .inpNum_group_list {
        height: 400px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    .inpNum_group_list_zuoxi {
        height: 350px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    .btnSty .inpNum .inpNum_group .inpNum_group_tit {
        text-align: left;
        width: 96%;
        margin-bottom: 10px;
        /*margin-left: 10px;*/
        margin-right: 10px;
        color: #000;
    }
    
    .btnSty .inpNum .inpNum_group .inpNum_group_nav {
        /*position: relative;*/
        overflow: hidden;
        width: 295px;
        height: 30px;
        /*padding: 10px 20px;*/
        margin-bottom: 5px;
    }
    
    .btnSty .inpNum .inpNum_group .inpNum_group_nav .inpNum_group_nav_btn {
        border: 1px solid #0f0f0f;
        /*position: absolute;*/
        /*top:0px;*/
        /*right: 15px;*/
        width: 90px;
        height: 20px;
        padding: 0px 5px;
        float: right;
        display: block;
    }
    
    .inpNum_group_search {
        height: 50px;
    }
    
    .btnSty .inpNum p {
        display: inline;
        font-size: 12px;
        color: #2b2b2b;
        margin-left: 10px;
    }
    
    .N_inpNumGroupTitIcon {
        position: absolute;
        right: 15px;
        font-size: 30px;
        width: 30px;
        height: 30px;
        color: #80848f;
    }
    
    .inpNum_group_nav p:first-child.unactive {
        border: 1px solid #ddd;
    }
    
    .inpNum_group_nav p:first-child.active {
        border: 1px solid #f05d49;
        background-color: #f05d49;
        color: #fff;
    }
</style>